<template>
	<view class="content container">
    <uni-nav :title="title">
<!--      <view style=" font-size: 32rpx;padding-right: 20rpx" @click="jumpto()">杉德</view>-->
    </uni-nav>
		<view class="card">
			<view class="ltr">
				<text class="label">余额(元)</text>
				<text class="value">{{money}}</text>
			</view>
			<view class="ltr-flex">
				<button @click="go('/pages/my/withdraw')">提现</button>
				<!-- <button class="linear">充值</button> -->
			</view>
		</view>
		<view class="list-menu">
			<view class="list-item" @click="go('/pages/bill/index')">
				<view class="item-lt">
					<view class="icon-area">
						<image class="icon-img" src="../../static/img/my/transaction-order.png"></image>
					</view>
					<text>账单明细</text>
				</view>
				<image class="right-icon-img" src="../../static/img/my/arrow_right.png"></image>
			</view>
			<view class="list-item" @click="go('/pages/bankcard/index')">
				<view class="item-lt">
					<view class="icon-area">
						<image class="icon-img" src="../../static/img/my/bank-card.png"></image>
					</view>
					<text>银行卡</text>
				</view>
				<image class="right-icon-img" src="../../static/img/my/arrow_right.png"></image>
			</view>
      <view class="ltr-flex-bottom">
        <button  @click="jumpto()">杉德</button>
        <!-- <button class="linear">充值</button> -->
      </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        allInfo:{},
				money: '0.00',
        title:'钱包'
			}
		},
		created() {
			this.$http.get('user/getUserInfo').then(res => {
				if (res.code == 1) {
					this.allInfo = res.data;
					//console.log(res.data)
					this.money = res.data.money
				}
			})
		},
		methods: {
      jumpto(){
        if(this.allInfo.is_fee=='0'){
          this.$http.get('user/payfee').then(res => {
            if (res.code == 1) {
              window.location.href = res.data;
            }
            if (res.code == '0') {
              this.toast(res.msg);
            }
          })
        }else{
          this.$http.get('user/cloud').then(res => {
            if (res.code == 1) {
              window.location.href = res.data;
            }
            if (res.code == '0') {
              this.toast(res.msg);
            }
          })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.content.container {
	overflow: hidden;

	.card {
		margin: 24rpx;
		border-radius: 48rpx;
		background: #009;
		padding: 48rpx;

		.ltr {
			margin-top: 18rpx;
			text {
				color: #fff;
				display: block;
				text-align: center;
				font-size: 56rpx;
				line-height: 1.5;

				&.label {
					font-size: 24rpx;
					color: rgba(255,255,255,0.6);
				}
			}
		}

		.ltr-flex {
			column-gap: 48rpx;
			column-count: 1;
			margin-top: 96rpx;

			button {
				flex: 1;
				appearance: none;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 28rpx;
				border-radius: 64rpx;
				background: #b0b4ec;
				color: #fff;

				&.linear {
					background: linear-gradient(to right, #e08302, #df4402);
				}
			}
		}
	}
  .ltr-flex-bottom{
    column-gap: 48rpx;
    column-count: 1;
    width: 86%;
    margin: 25px auto;

    button {
      flex: 1;
      appearance: none;
      height: 84rpx;
      line-height: 84rpx;
      font-size: 28rpx;
      border-radius: 64rpx;
      background: #009;
      color: #fff;

      &.linear {
        background: linear-gradient(to right, #e08302, #df4402);
      }
    }
  }
	.list-menu {
		.list-item {
			padding: 24rpx;
			display: flex;
			align-items: center;

			position: relative;

			font-size: 28rpx;

			.item-lt {
				flex: 1;
			}

			.right-icon-img {
				max-width: 36rpx;
				height: 36rpx;
				display: block;
				opacity: 0.45;
			}

			.icon-area {
				width: 60rpx;
				display: inline-block;
				vertical-align: top;

				.icon-img {
					max-width: 36rpx;
					height: 36rpx;
					display: block;
				}
			}

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: "";
				display: block;
				background: #f0f0f0;
				width: 100%;
				height: 1px;
			}
		}
	}
}
</style>
